<template>
    <div>
        <!-- <PageHeader hidden-breadcrumb :tab-list="tabList" :tab-active-key="tabActiveKey"
            @on-tab-change="handleChangeTab">
        </PageHeader> -->
        <Card :bordered="false" dis-hover class="ivu-mt">
            <table-form :labels="labelList" :members="memberList" :types="typeList" :hospital="hospitalList"  ref="searchForm"
                @search="onSearch" />
            <div class="i-table-no-border" ref="table">
                <Table size="small" ref="table" :columns="columns" :data="data" :loading="loading"
                    @on-sort-change="changeSort">
                    <template slot-scope="{ row }" slot="info">
                        <a href="javaScript:;" @click="handleDetailPatient(row)">{{ row.name }} , {{ row.age }} ,
                            {{ row.gender_str }}
                            <Tag class=" ivu-ml-16" v-if="+row.in_hospital_status===1" color="primary">{{ `${+row.in_hospital_status === 1 ? '住院' : ''}` }}</Tag>
                        </a>
                    </template>
                    <template slot-scope="{row}" slot="outpatient_name">
                        <Tag class="blueStatus" v-if="row.outpatient_name" color="blue">{{ row.outpatient_name }}</Tag>
                    </template>
                    <template slot-scope="{ row }" slot="patient_tags_name_arr">
                        <Poptip word-wrap trigger="hover" placement="right" width="400">
                            <Tag v-for="(item, index) in row.patient_tags_name_arr" :key="index" v-if="index < 3">
                                {{ item }}</Tag>
                            <div slot="content">
                                <Tag v-for="(item, index) in row.patient_tags_name_arr" :key="index">{{ item }}</Tag>
                            </div>
                        </Poptip>
                    </template>
                    <template slot-scope="{ row }" slot="patient_card_id">
                        <span v-if="row.patient_card_id">
                            <span v-if="row.patient_card_id.length < 15">
                                {{row.patient_card_id}}
                            </span>
                            <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200"
                                :content="row.patient_card_id">
                                {{row.patient_card_id.substring(0, 15)}}…
                            </Poptip>
                        </span>
                        <span v-else>无</span>
                    </template>
                    <template slot-scope="{ row }" slot="belong_member_name">
                        <span v-if="row.belong_member_name">
                            <span v-if="row.belong_member_name.length < 4">
                                {{row.belong_member_name}}
                            </span>
                            <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200"
                                :content="row.belong_member_name">
                                {{row.belong_member_name.substring(0, 4)}}…
                            </Poptip>
                        </span>
                        <span v-else>无</span>
                    </template>
                    <template slot-scope="{ row }" slot="remark">
                        <span v-if="row.remark">
                            <span v-if="row.remark.length < 12">
                                {{row.remark}}
                            </span>
                            <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200"
                                :content="row.remark">
                                {{row.remark.substring(0, 11)}}…
                            </Poptip>
                        </span>
                        <span v-else>无</span>
                    </template>
                    <template slot-scope="{ row }" slot="next_revisiting_time_str">
                        <div v-if="!row.show" class="DatePicker " @click="aaa" @dblclick="DatePicker (row)">
                            {{row.next_revisiting_time_str === '' ? '&#12288' : row.next_revisiting_time_str}}
                        </div>
                        <DatePicker :transfer="true" v-if="row.show" v-model="next_revisiting_time_strs"
                            placement="bottom" :options="options6" confirm type="date" placeholder="请选择下次复诊时间"
                            style="width: 80px" @on-ok="confirm(row)" @on-clear="OnClear(row)"></DatePicker>
                    </template>
                    <template slot-scope="{ row }" slot="last_callback">
                        <span v-if="row.last_callback">
                            <span v-if="row.last_callback.length < 15">
                                {{row.last_callback}}
                            </span>
                            <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200"
                                :content="row.last_callback">
                                {{row.last_callback.substring(0, 15)}}…
                            </Poptip>
                        </span>
                        <span v-else>无</span>
                    </template>
                    <template slot-scope="{ row, index }" slot="action">
                        <a @click="handleOpenDrawer(row.id)">编辑</a>
                        <Divider type="vertical" />
                        <a @click="handleSubmit(row)">回访</a>
                    </template>
                </Table>
                <div class="ivu-mt ivu-text-center">
                    <Page :total="total" :current.sync="page" show-total show-elevator :page-size="pageSize"
                        @on-change="changePage" :page-size-opts="pageOpts" show-sizer transfer
                        @on-page-size-change="changePageSize" />
                </div>
            </div>
            <edit-patient ref="editPatient" @ok="onLoad" />
            <table-model ref="editModel" @close="closeEdit" />
        </Card>
        <Drawer :closable="false" v-model="showTetailDrawer" width="1000" class="edtailDrawers"  >
            <detailDrawer :editType="edit_type" v-if="patientId&&showTetailDrawer" :patientId="patientId">
            </detailDrawer>
        </Drawer>
    </div>
</template>

<script>
    // import mixin from '../mixins';
    import tableForm from './table-form';
    import tableModel from '@/components/visitModel/table-model';
    import EditPatient from '../../../patient/patient-list/modules/editPatient'
    import { GetUnReturnList } from '@api/returnVisit';
    import { updateNextRevisitingTime } from '@/api/patient'
    import detailDrawer from '../../../patient/patient-detail/index.vue'

    import dayjs from 'dayjs';
    // import { mapActions } from 'vuex';
    export default {
        name: 'overdue',
        // mixins: [mixin],
        components: { tableModel, tableForm, EditPatient, detailDrawer },
        data() {
            return {
                patientId: null,
                edit_type: 1,
                showTetailDrawer: false,
                tabActiveKey: 'overdue',
                loading: false,
                pageOpts: [10, 20, 30, 50],
                columns: [
                    {
                        title: '基本信息',
                        slot: 'info',
                        minWidth: 200,
                        fixed: 'left'
                    },
                    {
                        title: '诊疗号',
                        key: 'patient_card_id',
                        slot: 'patient_card_id',
                        sortable: 'custom',
                        minWidth: 130
                    },
                    {
                        title: '上次到诊',
                        key: 'last_revisiting_time_str',
                        sortable: true,
                        minWidth: 110
                    },
                    {
                        title: '未到诊天数',
                        key: 'missed_days',
                        // sortable: true,
                        sortable: 'custom',
                        minWidth: 120
                    },
                    {
                        title: '下次复诊',
                        key: 'next_revisiting_time_str',
                        slot: 'next_revisiting_time_str',
                        // sortable: true,
                        sortable: 'custom',
                        minWidth: 110
                    },
                    {
                        title: '复诊次数',
                        key: 'revisiting_count',
                        // sortable: true,
                        sortable: 'custom',
                        minWidth: 110
                    },
                    {
                        title: '上次回访时间',
                        key: 'last_callback_time_str',
                        sortable: true,
                        minWidth: 150
                    },
                    {
                        title: '下次回访时间',
                        key: 'next_callback_time_str',
                        sortable: true,
                        minWidth: 150
                    },
                    {
                        title: '最近一次回访内容',
                        key: 'last_callback',
                        slot: 'last_callback',
                        minWidth: 150
                    },
                    {
                        title: '回访次数',
                        key: 'callback_count',
                        sortable: 'custom',
                        minWidth: 110
                    },
                    {
                        title: '过期天数',
                        key: 'diff_day',
                        // sortable: true,
                        sortable: 'custom',
                        minWidth: 110
                    },
                    {
                        title: '患者标签',
                        slot: 'patient_tags_name_arr',
                        minWidth: 100
                    },
                    {
                        title: '就诊类型',
                        slot: 'outpatient_name',
                        minWidth: 100
                    },
                    {
                        title: '备注',
                        minWidth: 120,
                        slot: 'remark'
                    },
                    {
                        title: '上次回访人',
                        key: 'last_callback_user',
                        minWidth: 120
                    },
                    {
                        title: '诊室',
                        key: 'clinic_name',
                        minWidth: 120
                    },
                    {
                        title: '归属人',
                        key: 'belong_member_name',
                        slot: 'belong_member_name',
                        minWidth: 100
                    },
                    {
                        title: '操作',
                        minWidth: 110,
                        slot: 'action',
                        fixed: 'right'
                    }
                ],
                data: [],
                page: 1,
                pageSize: 10,
                total: 0,
                labelList: [],
                memberList: [],
                typeList: [],
                hospitalList:[],
                searchForm: {},
                sortForm: {},
                modal: false,
                options6: {
                    disabledDate(date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                },
                row: {
                    show: false
                },
                next_revisiting_time_strs: ''
            }
        },
        mounted() {
            this.dateInit();
            // this.onLoad();
        },
        methods: {
            closeDrawer() {
                this.onLoad();
            },
            // 清除
            OnClear(row) {
                row.show = !row.show
            },
            // 确认日期
            confirm(row) {
                if (row.next_revisiting_time_str === '') {
                    row.next_revisiting_time_str = dayjs(new Date()).format('YYYY-MM-DD')
                    const config = {
                        id: row.id,
                        next_revisiting_time: row.next_revisiting_time_str
                    }
                    updateNextRevisitingTime(config).then(res => {
                        row.show = !row.show
                    })
                } else {
                    this.next_revisiting_time_strs = dayjs(this.next_revisiting_time_strs).format('YYYY-MM-DD')
                    const config = {
                        id: row.id,
                        next_revisiting_time: this.next_revisiting_time_strs
                    }
                    updateNextRevisitingTime(config).then(res => {
                        row.next_revisiting_time_str = this.next_revisiting_time_strs
                        row.show = !row.show
                    })
                }
            },
            // 单机事件
            aaa() {
                this.row.next_revisiting_time_strs = dayjs(this.row.next_revisiting_time_strs).format('YYYY-MM-DD')
                this.row.show = false
            },
            // 双击事件
            DatePicker(e) {
                this.next_revisiting_time_strs = e.next_revisiting_time_str
                this.row = e
                e.show = !e.show
            },
            // 编辑
            handleOpenDrawer(id) {
                this.$refs.editPatient.handleOpenDrawer(id, 1)
            },
            // ...mapActions('admin/page', ['setPatientDetail']),
            handleDetailPatient(row) {
                this.patientId = row.id
                this.showTetailDrawer = true
                // this.$store.commit('admin/page/setPatientDetail', { patientId: row.id, edit_type: 1 })
                // this.$router.push('/patient/detail')
            },
            dateInit() {
                this.searchForm.unfollow_time = '1';
            },
            onLoad() {
                /**
                 * @description 过期未回访列表
                 * @param {Object} param page  {String} 页数
                 * @param {Object} param pageSize {String} 条数/页
                 */
                this.loading = true
                const params = this.getParam();
                GetUnReturnList(params).then((res) => {
                    this.data = this.fliteItem(res.list);
                    for (let i = 0; i < this.data.length; i++) {
                        this.$set(this.data[i], 'show', false)
                    }
                    this.page = res.page;
                    this.pageSize = res.pageSize;
                    this.total = res.total;
                    this.labelList = res.condition.tags_list;
                    this.memberList = res.condition.member_list;
                    this.typeList = res.condition.outpatient_type_list;
                    this.hospitalList=res.condition.hospital
                }).finally(() => {
                    this.loading = false
                })
            },
            getParam() {
                let param = {
                    page: this.page,
                    pageSize: this.pageSize,
                    customer: 1
                }
                param = Object.assign(param, this.searchForm, this.sortForm)
                return param
            },
            fliteItem(arr) {
                let reArr = [];
                if (arr && arr.length > 0) {
                    arr.forEach((item) => {
                        const reItem = item;
                        item.basic = item.name + ' ' + item.gender_str + ' ' + item.age + '岁';
                        reArr.push(reItem);
                    })
                }
                return reArr;
            },
            changeSort(column) {
                this.sortForm.sort_revisiting_type = 0
                this.sortForm.next_callback_time_type = 0
                this.sortForm.sort_missed_type = 0
                this.sortForm.last_revisiting_time_type = 0
                this.sortForm.next_revisiting_time_type = 0
                this.sortForm.last_callback_time_type = 0
                this.sortForm.sort_callback_count_type = 0
                this.sortForm.sort_patient_card_id = 0
                switch (column.key) {
                case 'patient_card_id':
                    column.order === 'asc' ? this.sortForm.sort_patient_card_id = 1 : this.sortForm.sort_patient_card_id = 2
                    break;
                    case 'last_revisiting_time_str':
                        column.order === 'asc' ? this.sortForm.last_revisiting_time_type = 1 : this.sortForm.last_revisiting_time_type = 2
                        break;
                    case 'revisiting_count':
                        column.order === 'asc' ? this.sortForm.sort_revisiting_type = 1 : this.sortForm.sort_revisiting_type = 2
                        break;
                    case 'next_callback_time_str':
                        column.order === 'asc' ? this.sortForm.next_callback_time_type = 1 : this.sortForm.next_callback_time_type = 2
                        break;
                    case 'missed_days':
                        column.order === 'asc' ? this.sortForm.sort_missed_type = 1 : this.sortForm.sort_missed_type = 2
                        break;
                    case 'last_callback_time_str':
                        column.order === 'asc' ? this.sortForm.last_callback_time_type = 1 : this.sortForm.last_callback_time_type = 2
                        break;
                    case 'next_revisiting_time_str':
                        column.order === 'asc' ? this.sortForm.next_revisiting_time_type = 1 : this.sortForm.next_revisiting_time_type = 2
                        break;
                    case 'callback_count':
                        column.order === 'asc' ? this.sortForm.sort_callback_count_type = 1 : this.sortForm.sort_callback_count_type = 2
                        break;
                }
                if (column.key === 'diff_day') {
                    if (column.order === 'asc') {
                        var compare = function (obj1, obj2) {
                            var val1 = obj1.diff_day;
                            var val2 = obj2.diff_day;
                            if (val1 < val2) {
                                return -1;
                            } else if (val1 > val2) {
                                return 1;
                            } else {
                                return 0;
                            }
                        }
                        return this.data = this.data.sort(compare)
                    } else if (column.order === 'desc') {
                        var compare = function (obj1, obj2) {
                            var val1 = obj1.diff_day;
                            var val2 = obj2.diff_day;
                            if (val1 > val2) {
                                return -1;
                            } else if (val1 < val2) {
                                return 1;
                            } else {
                                return 0;
                            }
                        }
                        return this.data = this.data.sort(compare)
                    } else {

                    }
                }

                this.onLoad();
            },
            changePage(page) {
                this.page = page;
                this.onLoad();
            },
            changePageSize(pagesize) {
                this.pageSize = pagesize;
                this.onLoad();
            },
            onSearch(data) {
                this.searchForm = this.filterSearch(data);
                this.onLoad();
            },
            filterSearch(data) {
                return {
                    unfollow_time: data.overdue,
                    keywords: data.name,
                    belong_member_id: data.personnel,
                    outpatient_type_id: data.diagnosis,
                    tags_id: (data.label).join(','),
                    in_hospital:data.in_hospital
                }
            },
            handleSubmit(row) {
                this.$refs.editModel.handleShow(row, this.typeList, this.labelList, 1)
            },
            closeEdit(val) {
                if (val) {
                    this.onLoad();
                }
            }
        }
    }
</script>
<style scoped lang="less">
    .blueStatus {
        line-height: 20px;
        background: #e6fffb;
        border-color: #87e8de;
        font-size: 12px;
        color: #13c2c2 !important;
    }
</style>